<template>
	<d2-container>
		<div slot="header" style="display:flex; justify-content: space-between;">
			<div>分类管理</div>
			<div>
				<el-button type="primary" size="small " icon="el-icon-plus" @click="onclassAdd">添加</el-button>
			</div>
		</div>
		<div>
			<template>
				<el-table stripe highlight-current-row style="width: 100%" :data="classData">
					<el-table-column type="index" width="50" label="序号"></el-table-column>
					<el-table-column prop="created_at" label="日期"></el-table-column>
					<el-table-column label="主图">
						<template slot-scope="scope">
							<el-avatar :src="baseUrl+scope.row.thumb" :size="50" v-if="scope.row.thumb!=null"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="标签名称"></el-table-column>
					<el-table-column prop="sort" label="排序" sortable></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="onClassUpdata(scope.row.id)">修改</el-button>
							<el-button type="text" size="small" @click="onClassDel(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<el-dialog title="分类管理" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
			<el-form label-width="100px" ref="dialogFrom" :model="form">
				<el-form-item label="标签名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item label="排序" prop="sort"><el-input v-model.number="form.sort"></el-input></el-form-item>
				<el-form-item label="上传主图" >
					<el-upload
						action="managea/Tphoto"
						list-type="picture-card"
						:on-remove="handleRemove"
						:on-error="handlError"
						:on-exceed="handlExceed"
						:on-success="hanlSuccess"
						:limit="1"
						:file-list="fileList"
					>
						<i class="el-icon-plus"></i>
					</el-upload>
					<div style="color: red;">建议上传图片尺寸为106*106像素</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">确定</el-button>
					<el-button @click="handleClose">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 分页 -->
		<template slot="footer">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="page.current"
				layout="total, prev, pager, next, jumper"
				:total="page.total"
				:page-size="page.size"
			></el-pagination>
		</template>
	</d2-container>
</template>

<script>
	import {getCategory,postCategoryAdd,getCategoryEdit,postCategoryUpdate,getCategoryDel } from '@/api/api'
	export default{
		data(){
			return{
				dialogVisible: false,
				form: {
					name: '',
					sort: 0,
					thumb:''
				},
				fileList: [], //图片路径
				page: {
					//分页
					total: 20,
					current: 1,
					size: 10
				},
				id:-1,
				classData:[],
				baseUrl:process.env.VUE_APP_URL
			}
		},
		mounted(){
			this.getClassData()
		},
		methods:{
			//列表
			getClassData(){
				// console.warn(process.env)
				let data={
					page:this.page.current
				}
				getCategory().then(res=>{
					if(res.state==0){
						this.classData=res.data.data;
						this.page.size=res.data.per_page;
						this.page.total=res.data.total;
					}else{
						this.$message.error(res.msg)
					}
				})
			},
			//添加
			onclassAdd(){
				this.id=-1;
				this.dialogVisible=true;
			},
			//修改
			onClassUpdata(id){
				getCategoryEdit(id).then(res=>{
					if(res.state==0){
						this.form=res.data;
						if(res.data.thumb!=null&&res.data.thumb!=undefined){
							let data={
								url:this.baseUrl+res.data.thumb
							}
							this.fileList.push(data)
						}
						this.id=id;
						this.dialogVisible=true;
					}
				})
			},
			//删除
			onClassDel(id){
				  this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          getCategoryDel(id).then(res=>{
							  if(res.state==0){
								  this.$message.success("删除成功")
								  this.getClassData()
							  }else{
							this.$message.error(res.msg)
						}
						  })
				        })
			},
			//提交
			onSubmit(){
				if(this.id==-1){ //添加
					postCategoryAdd(this.form).then(res=>{
						if(res.state==0){
							this.$message.success("添加成功")
							this.getClassData()
							this.handleClose()
						}else{
							this.$message.error(res.msg)
						}
					})
				}else{	//修改
					postCategoryUpdate(this.form).then(res=>{
						if(res.state==0){
							this.$message.success("修改成功")
							this.getClassData()
							this.handleClose()
						}else{
							this.$message.error(res.msg)
						}
					})
				}
			},
			//图片上传
			handleRemove(file, fileList) {
				//删除
				this.fileList = fileList;
				this.form.thumb  = '';
				console.log(this.fileList);
			},
			handlError(err, file, fileList) {
				this.$message.error('图片上传失败！');
			},
			handlExceed(files, fileList) {
				if (fileList.length >= 1) {
					this.$message.error('只能上传一张图片');
				}
			},
			hanlSuccess(res, file, FileList) {
				//成功
				this.form.thumb = res.data[1]; //存路径上传的时候用
				// this.fileList[0]=res.data[1]
			},
			//分页
			handleCurrentChange(val) {
				this.page.current = val;
				this.getClassData();
			},
			handleClose() {
				//重置表单
				this.form.name='';
				this.form.sort='';
				this.fileList = [];
				this.form.thumb  = '';
				this.dialogVisible = false;
			},
		}
	}
</script>

<style>
</style>
